<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content flex">
            <div class="w220">
                <menu-list></menu-list>
            </div>
            <div class="w980 flex_full">
                <div class="flex flex_between">
                  <p class="flex flex_vcenter pdb20">
                    <i class="titleTag"></i>
                    <span class="fRedBig">健康资讯</span>
                  </p>
                    <button class="longBtn" @click="addhealthnews(item)">新增健康资讯</button>
                </div>
                <div class="contain bg">
                    <div class="topblank">
                        <div class="col-md-4">
                            <input type="text" class="form-control" v-model="param.content" placeholder="请输入标题进行搜索">
                        </div>
                        <div class="col-md-3">
                            <button class="default blue" @click="getsearchlist">搜索</button>
                        </div>
                    </div>
                    <div class="healthnewslist">
                        <table class="table">
                            <tbody>
                                <tr v-for="item in healnewslist" track-by="$index">
                                    <td>
                                        <div class="fl">
                                            <img :src="item.infoTitlePicture" width="120" height="80">
                                        </div>
                                        <div class="fl lectureTitle">
                                            <h3>{{item.infoTitle}}
                                                <div class="btn-group" role="group">
                                               <button type="button" class="btn btn-default nogo">{{item.infoTypeText}}</button>
                                                </div>
                                            </h3>
                                            <p class="talktime" >发布时间：<span v-show="item.verifyState==1">
                                            {{item.infoVerifyTime}} {{item.infoVerifyHM}}
                                            </span></p>
                                            <p class="talkdoc">发布医生：<span>{{item.infoApplyUserName}} {{item.levelText}}</span></p>
                                        </div>
                                    </td>
                                   <!--  <td>
                                        <p>申请人</p>
                                        <p>{{item.infoApplyUserName}}</p>
                                    </td> -->
                                    <!-- <td>
                                        <p>{{item.infoApplydate}}</p>
                                        <p>{{item.infoApplyyear}}</p>
                                    </td> -->
                                    <td>
                                        <p :class="{red:item.verifyState=='2',green:item.verifyState=='1',orange:item.verifyState=='0'}">{{item.verifyStateText}}</p>
                                        <!--   <p class="green">已发布</p>
                                        <p class="orange">待审核</p> -->
                                    </td>
                                    <td v-if="login_roleId=='main_doctor'">
                                        <span class="glyphicon glyphicon-pencil" v-if="item.verifyState=='2'" @click="addhealthnews(item)"></span>
                                        <span class="glyphicon glyphicon-trash" v-if="item.verifyState=='1'||item.verifyState=='2'" @click="delehealthnews(item)"></span>
                                        <span class="glyphicon glyphicon-eye-open" v-if="item.verifyState=='0'||item.verifyState=='1'" @click="lookhealthnews(item)"></span>
                                        <p class="mt30">申请时间：{{item.infoApplyyear}}  {{item.infoApplydate}}</p>
                                    </td>
                                    <td v-if="login_roleId=='chronic_doctor'">
                                        <!--  <span class="glyphicon glyphicon-pencil" v-if="item.verifyState=='0'"></span> -->
                                        <span class="glyphicon glyphicon-trash" v-if="item.verifyState=='1'" @click="delehealthnews(item)"></span>
                                        <span class="glyphicon glyphicon-eye-open" v-if="item.verifyState=='2'||item.verifyState=='1'" @click="lookhealthnews(item)"></span>
                                        <span class="glyphicon glyphicon-list-alt" v-if="item.verifyState=='0'" @click="verifyhealthnews(item)"></span>
                                         <p class="mt30">申请时间：{{item.infoApplyyear}}  {{item.infoApplydate}}</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3">
                                        <div class="pull-left">
                                            <button class="btn btn-default" @click="refresh">刷新</button>
                                        </div>
                                        <div class="pull-right">
                                            <boot-page v-ref:page :async="true" :lens="lenArr" :page-len="pageLen" :headersparam="headersparam" :param="param"></boot-page>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增或者修改 -->
        <healnews-edit :modaltitle="modaltitle" :username="username" :applytime="applytime" :imgurl="imgurl" v-ref:addhealthnews></healnews-edit>
        <!-- 作废 -->
        <healnews-dele :modaltitle="modaltitle" :username="username" :applytime="applytime" :imgurl="imgurl" v-ref:delehealthnews></healnews-dele>
        <!-- 审核 -->
        <healnews-verify :modaltitle="modaltitle" :username="username" :applytime="applytime" :imgurl="imgurl" v-ref:verifyhealthnews></healnews-verify>
        <!-- 查看 -->
        <div class="modal fade bs-example-modal-lg" id="lookhealthnews" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">
                {{modaltitle}}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="fail cbafter" v-show="lookitem.verifyState=='2'">
                            <div class="textdes">
                                <p class="nosuccess">审核未通过！</p>
                                <p>{{lookitem.verifySuggestion}}</p>
                            </div>
                        </div>
                        <div class="changeinfo cbafter">
                            <div class="changeinfo_head cbafter">
                                <span>申请人：{{username}}</span>
                                <span>申请时间：{{applytime}}</span>
                            </div>
                            <div class="cb changeinfo_con">
                                <div class="fl">
                                    <img :src="lookitem.infoTitlePicture" width="120" height="80" class="titimg">
                                </div>
                                <div class="fl lectureTitle">
                                    <h3>{{lookitem.infoTitle}}
                                                <div class="btn-group" role="group">
                                               <button type="button" class="btn btn-default nogo">{{lookitem.infoTypeText}}</button>
                                                </div>
                                            </h3>
                                    <p class="talktime">发布时间：<span>{{lookitem.infoVerifyTime}}</span></p>
                                    <p class="talkdoc">发布医生：<span>{{lookitem.infoApplyUserName}} {{lookitem.levelText}}</span></p>
                                </div>
                                <div class="cb lookcontent">{{{lookitem.infoContent}}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import Public from 'assets/public.js'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
import healnewsEdit from 'components/healnews-edit.vue'
import healnewsDele from 'components/healnews-dele.vue'
import healnewsVerify from 'components/healnews-verify.vue'
import bootPage from 'components/BootPage.vue'
export default {
    data() {
            return {
                login_roleId: Public.getsessionStorage("roleId"),
                //公用的start
                username: sessionStorage.getItem('userName'),
                applytime: "",
                imgurl: "", //修改的时候文件预览
                modaltitle: "",
                //公用的end
                healnewslist: [],
                lenArr: [10, 20, 50], // 每页显示长度设置
                pageLen: 5, // 可显示的分页数
                headersparam: {
                    "X-Service-Id": "coms.healthMessageService",
                    "X-Service-Method": Public.getsessionStorage("roleId") == "main_doctor" ? "queryHealthMessageByInfoApplyUser" : "queryHealthMessage",
                },
                param: {
                    content: "",
                    "kind": "", //审核状态一直为空就可以
                    "pageNo": 1,
                    "pageSize": 10

                },
                lookitem: {
                    "infoId": "",
                    "infoTitle": "",
                    "infoTitlePicture": 0,
                    "infoContent": "",
                    "infoType": "",
                    "infoApplyUser": "",
                    "infoApplyUserName": "",
                    "level": "",
                    "infoApplyTime": "",
                    "infoVerifyUser": "",
                    "infoVerifyUserName": "",
                    "infoVerifyTime": "",
                    "verifyState": "",
                    "status": "",
                    "infoTypeText": "",
                    "verifyStateText": "",
                    "levelText": "",
                    verifySuggestion: "",
                },

            }
        },
        computed: {

        },
        components: {
            moduleHead, menuList, bootPage, healnewsEdit, healnewsDele, healnewsVerify
        },
        ready() {


        },
        methods: {
            // 列表页面刷新按钮
            refresh() {
                    this.$refs.page.refresh()
                },
                //新增和修改弹框
                addhealthnews(item) {
                    this.$refs.addhealthnews.addhealthnews(item);
                },

                // 查看
                lookhealthnews(item) {
                    $("#lookhealthnews").modal("show");
                    this.modaltitle = "健康资讯信息";
                    this.username = item.infoApplyUserName;
                    this.applytime = item.infoApplyTime;
                    // item.infoContent = item.infoContent.replace(/(style="[^"]+")/g,"style='width:100%;height:auto'");
                    this.lookitem = item;
                },
                // 作废弹框
                delehealthnews(item) {
                    this.$refs.delehealthnews.delehealthnews(item);
                },

                // 审核弹框
                verifyhealthnews(item) {
                    this.$refs.verifyhealthnews.verifyhealthnews(item);

                },
                getsearchlist() {
                    this.refresh();
                },

        },
        events: {
            // 分页列表数据
            'data' (data) {
                if (data.length > 0) {
                    $.each(data, function(index, el) {
                        el.infoTitlePicture = Public.IMGVIEW_URL() + el.infoTitlePicture
                        el.infoVerifyTime = el.infoVerifyTime ? el.infoVerifyTime.substring(0, 10) : "";
                        el.infoVerifyHM = el.infoVerifyTime ? el.infoVerifyTime.substring(10, 16) : "";
                        el.infoApplyyear = el.infoApplyTime.substring(0, 10);
                        el.infoApplydate = el.infoApplyTime.substring(10, 16);
                    });
                }
                this.healnewslist = data;
            },
            'verifyhealthnewssave' () {
                this.refresh();
            },
            'healthnewssave' () {
                this.refresh();
            },
            'delehealthnewssave' () {
                this.refresh();
            }

        },
        watch: {

        },
}
$(function() {

})
</script>
<style scoped>
/*会员列表*/

.contain .healthnewslist {
    padding: 20px 30px
}

.contain table td {
    padding-top: 20px;
    text-align: center;
}

.contain table tr td:nth-child(1) {
    text-align: left;
    padding-top: 0
}


.contain table tr td:nth-child(3) {
    color: #9A9A9A;
    padding-top: 30px
}

.contain table tr td span.glyphicon {
    display: inline-block;
    font-size: 16px;
    width: 30px;
    height: 30px;
}

.contain table tr td span.glyphicon:hover {
    color: #1dc499;
    cursor: pointer;
}

.table>tbody>tr>td {
    border-bottom: 1px dashed #ddd;
    border-top: none;
}

.table>tbody>tr:last-child td {
    padding-top: 10px;
}

.btn-default.ok {
    color: #fff
}

.contain .table td h3 {
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
    padding-top: 5px;
}

.btn-default {
    padding: 3px 12px;
    color: #1dc499;
    border: 1px solid #1dc499;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active {
    color: #fff;
    background-color: #1dc499;
    border-color: #ccc;
    cursor: default;
}

.go.btn-default:hover,
.go.btn-default:focus,
.go.btn-default.focus,
.go.btn-default:active,
.go.btn-default.active {
    cursor: pointer;
    color: #1dc499;
    border: 1px solid #1dc499;
}

.nogo.btn-default:hover,
.nogo.btn-default:focus,
.nogo.btn-default.focus,
.nogo.btn-default:active,
.nogo.btn-default.active {
    background-color: #fff;
    color: #1dc499;
    border: 1px solid #1dc499;
}

.contain .table td h3>.btn-group {
    margin-left: 10px
}

.contain .table td p {
    color: #9A9A9A;
    line-height: 26px;
}

.contain .table td p span {
    color: #333;
}

.talktime,
.talkdoc,
.talkaddr,
.talkacon {
    padding-left: 30px;
}

.talktime {
    background: url(../../assets/img/time.png) no-repeat left center;
}

.talkdoc {
    background: url(../../assets/img/talkdoc.png) no-repeat left center;
}

.talkaddr {
    background: url(../../assets/img/talkaddr.png) no-repeat left center;
}

.talkacon {
    background: url(../../assets/img/fyf.png) no-repeat left center;
}

.topblank {
    background: #fafafa;
    border-radius: 10px 10px 0 0;
    height: 50px;
    border-bottom: 1px solid #ddd;
    padding-top: 8px
}

.contain .table td p.red {
    color: #ef5037;
}

.contain .table td p.orange {
    color: #fdab36;
}

.contain .table td p.green {
    color: #1dc499;
}
.contain .table td p.mt30 {
   margin-top: 30px
}
#searchbyname {
    width: 400px
}

.contain table tr td img {
    margin: 10px 10px 10px 0;
}

.lectureTitle {
    width: 300px
}
#lookhealthnews .lectureTitle {
    width: 650px;margin-left: 10px; padding-bottom: 10px;

}
#lookhealthnews .changeinfo_con img.titimg{width:100px; height: 72px;margin-top: 5px}
#lookhealthnews .changeinfo h3{font-size: 14px;line-height: 24px;}
#lookhealthnews .changeinfo p{font-size: 12px;line-height: 24px;}
#lookhealthnews .lookcontent{ padding-top: 10px; border-top:2px dotted #ccc;}
#lookhealthnews .changeinfo_con{height: 300px;overflow-y: auto;}
#lookhealthnews .lookcontent img{ width: 398px;height: auto }
.changeinfo_con{width: 830px}
</style>
